<template>
    <div id="frame-outer-labchange">
        <h3 v-if="isCreate">添加实验室</h3>
        <h3 v-else>修改用户实验室</h3>
        <div id="form-outer">
            <el-form :model="lab" label-width="100px">
                <el-form-item :label="label.tag">
                    <el-input placeholder="请输入实验室类型" v-model="lab.tag" />
                </el-form-item>
                <el-form-item :label="label.label">
                    <el-input placeholder="请输入实验室名称" v-model="lab.label"/>
                </el-form-item>
                <el-form-item :label="label.size">
                    <el-input placeholder="请输入实验室最大可容纳人数" v-model.number="lab.size" />
                </el-form-item>
                <el-form-item :label="label.function">
                    <el-input type="textarea" placeholder="请描述实验室功能" v-model="lab.function" />
                </el-form-item>
                <el-form-item :label="label.location">
                    <el-input placeholder="请输入实验室位置" v-model.number="lab.location" />
                </el-form-item>
                <el-form-item :label="label.creator" v-if="!isCreate">
                    <el-input disabled="true" :placeholder="lab.creator_name"></el-input> 
                </el-form-item>
            </el-form>
            <el-table v-model:data="devices" 
                style="width: 100%"
                :height="tableHeight"
                >
                    <el-table-column prop="name" label="设备名称" width="150" />
                    <el-table-column prop="number" label="设备数量" width="120" />
                    <el-table-column prop="description" label="设备描述" width="250"/>
                    <el-table-column prop="create_at" label="创建时间" width="120"/>
                    <el-table-column prop="update_at" label="修订时间" width="120"/>
                    <el-table-column label="修改信息" width="100">
                        <template #default="scope">
                            <el-button @click="updateDevice(scope.row.id)" type="warning">修改</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="删除设备" width="100">
                        <template #default="scope">
                            <el-button @click="deleteDevice(scope.row.id)" type="danger">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <hr/>
                <el-form-item v-if="isCreate">
                    <el-button type="primary" @click="submitForm()">创建</el-button>
                    <el-button type="warning" @click="resetForm()">重置</el-button>
                    <el-button type="info" @click="addDevice()">添加设备</el-button>
                    <el-button type="warning" @click="back()">返回</el-button>
                </el-form-item>
                <el-form-item v-else>
                    <el-button type="danger" @click="deleteLab()">删除</el-button>
                    <el-button type="info" @click="addDevice()">添加设备</el-button>
                    <el-button type="primary" @click="updateLab()">更新实验室非设备信息</el-button>
                    <el-button type="warning" @click="back()">返回</el-button>
                </el-form-item>
        </div>
        <div :class='`message-box-background ${isDeviceUpdateOrCreate && "message-box-selected"}`' >
            <div class="message-box">
                <h4 v-if="isDeviceCreate">添加设备</h4>
                <h4 v-else>修改设备信息</h4>
                <el-form-item :label="device_label.name">
                    <el-input placeholder="请输入设备名称" v-model="addOrUpdateDevice.name" />
                </el-form-item>
                <el-form-item :label="device_label.number">
                    <el-input placeholder="请输入设备数量" v-model.number="addOrUpdateDevice.number" />
                </el-form-item>
                <el-form-item :label="device_label.description">
                    <el-input type="textarea" placeholder="请描述设备信息功能" v-model="addOrUpdateDevice.description"/>
                </el-form-item>
                <el-button v-if="isDeviceCreate" type="primary" @click="submitAddDeviceRequest()">提交</el-button>
                <el-button v-else type="primary" @click="submitUpdateDeviceRequest()">提交</el-button>
                <el-button  type="info" @click="exit()">退出</el-button>  

            </div>
        </div>
    </div>
</template>

<script>
    import axios from "axios"
    import {ElMessage,ElMessageBox} from "element-plus"

    export default {
        data(){
            return {
                isDeviceUpdateOrCreate:false,
                isDeviceCreate:false,
                isCreate:true,
                tableHeight:"210",
                lab:{
                    id:null,
                    label:"",
                    tag:"",
                    size:null,
                    function:"",
                    location:""
                },
                devices:[],
                device_label:{
                    "name":"设备名称",
                    "number":"设备数量",
                    "description":"设备描述"
                },
                label:{
                    id:0,
                    label:"实验室名称",
                    tag:"实验室类型",
                    size:"实验室容量",
                    location:"实验室位置",
                    function:"实验室介绍",
                    creator:"实验室创建者"
                },
                addOrUpdateDevice:{
                    "id":0,
                    "lab_id":"",
                    "name":null,
                    "number":null,
                    "creator":0,
                    "description":null
                }
            };
        },
        methods:{
            deleteLab(){
                let that = this
                ElMessageBox.confirm("你确定要删除当前实验室信息吗？").then(()=>{
                    axios.post("/lab.delete",{id:that.lab.id}).then((res)=>{

                    })
                })
            },
            submitAddDeviceRequest(){
                axios.post("/device/create",this.addOrUpdateDevice).then((res)=>{
                        if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"设备添加成功"
                        })
                        res.data.data.create_at = new Date(res.data.data.create_at).toLocaleDateString()
                        res.data.data.update_at = new Date(res.data.data.update_at).toLocaleDateString()
                        this.devices.push(res.data.data)
                        this.isDeviceUpdateOrCreate = false
                        this.queryLab()    
                    }else{
                            ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                        }
                })
            },
            exit(){
                Object.keys(this.addOrUpdateDevice).forEach((key)=>{
                    this.addOrUpdateDevice[key] = null
                })
                this.isDeviceUpdateOrCreate = false
            },
            submitForm(){
                axios.post("/lab/create",this.lab).then((res)=>{
                    if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"实验室添加成功"
                        })
                        this.lab.id = res.data.data
                        this.isCreate = false
                        this.queryLab()    
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            },
            updateLab(){
                axios.post("/lab/update",{
                    id:this.lab.id,
                    label:this.lab.label,
                    tag:this.lab.tag,
                    size:this.lab.size,
                    creator:this.lab.creator,
                    function:this.lab.function,
                    location:this.lab.location
                }).then((res)=>{
                    if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"信息修改成功"
                        })
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            },  
            addDevice(){
                if(this.lab.id == 0)
                {
                    ElMessage.error("请先创建实验室！")
                    return
                }else{
                    this.addOrUpdateDevice.id = 0
                    this.addOrUpdateDevice.lab_id = this.lab.id
                    this.addOrUpdateDevice.description = null
                    this.addOrUpdateDevice.name = null
                    this.addOrUpdateDevice.number = null
                }
                this.isDeviceUpdateOrCreate = true
                this.isDeviceCreate = true
            },
            deleteDevice(id){
                let that = this
                
                axios.post("/device/delete",{id}).then((res)=>{
                    if(res.data.code != 0)
                    {
                        ElMessage.error("设备删除失败")
                    }
                    else
                    {
                        for(let i in that.devices){
                            if(that.devices[i].id == id){
                                delete that.devices[i]
                                ElMessage({
                                    type:"success",
                                    message:"删除成功"
                                })
                                return
                            }
                        }
                    }
                })
            },
            updateDevice(id){
                let that = this
                let i = 0
                for(i in that.devices){
                    if(that.devices[i].id == id){
                        break
                    }
                }
                this.addOrUpdateDevice.id = id
                this.addOrUpdateDevice.lab_id = that.lab.id
                this.addOrUpdateDevice.description = that.devices[i].description
                this.addOrUpdateDevice.name = that.devices[i].name
                this.addOrUpdateDevice.number = that.devices[i].number
                this.addOrUpdateDevice.creator = that.devices[i].creator
                this.isDeviceUpdateOrCreate = true
                this.isDeviceCreate = false
            },
            submitUpdateDeviceRequest(){
                let that = this
                axios.post("/device/update",this.addOrUpdateDevice).then((res)=>{
                    if(res.data.code != 0)
                    {
                        ElMessage.error("设备更新失败")
                    }
                    else
                    {
                        for(let i in that.devices){
                            if(that.devices[i].id == that.addOrUpdateDevice.id){
                                console.log(i)
                                that.devices[i].description = this.addOrUpdateDevice.description
                                that.devices[i].name = this.addOrUpdateDevice.name
                                that.devices[i].number = this.addOrUpdateDevice.number
                            }
                        }   
                        ElMessage({
                            type:"success",
                            message:"信息更新成功"
                        })    
                    }
                })
            },
            back(){
                this.$router.back()
            },
            resetForm(){
                Object.keys(this.lab).forEach((key)=>{
                    this.lab[key] = ""
                })
            },
            queryLab(){
                axios.post("/lab/queryLab",{"id": this.lab.id}).then((res)=>
                {
                    if(res.data.code == 0){
                    let data = res.data.data
                    Object.keys(data.lab).forEach(
                        (key)=>{
                            if(key != "create_at" && key != "create_at"){
                                this.lab[key] = data.lab[key]
                            }
                        }
                    )
                    for(let i in data.devices){
                        data.devices[i].create_at = (new Date(data.devices[i].create_at)).toLocaleDateString()
                        data.devices[i].update_at = (new Date(data.devices[i].update_at)).toLocaleDateString()                                                
                    }
                    that.devices = data.devices
                    that.lab.creator_name = data.lab.creator_name + "(" + data.lab.telphone + ")"
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            }
        },
        mounted(){
            if(this.$route.path.startsWith("/index/adminAddLab")){
                this.isCreate = true
            }else{
                this.isCreate = false
                this.lab.id = parseInt( this.$route.params.id )
                this.queryLab()
            }
        }
    }
    
</script>

<style scopted>

#frame-outer-labchange{
    height: 100%;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items:center;
    padding-top: 2px;
}

#form-outer-labchange{
    height:80%;
    width:80%;
}

.alertInput{
    border:red solid 2px; 
}

.message-box-background{
    position: fixed;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    z-index:-1;
    background-color:#00000075;
    box-shadow: #a4b0be88 0px 0px 5px;
}

.message-box{
    position: fixed;
    top: 50%;
    left: 50%;
    padding-bottom:5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top:3%;
    transform: translate(-50%, -50%);
    background-color:#a4b0be;
    box-shadow: #a4b0be88 0px 0px 5px;
    border-radius: 5px;
}

.message-box-selected{
    z-index:999;
}


</style>

